<template>
  <div class="page-line-pie">
    <h4 class="page-pie" style="margin-left: 2%">重大危险源分布</h4>
    <ve-pie :data="chartData" :extend="chartExtend" :settings="chartSettings" style="top:100px;margin-left: -30%">
    </ve-pie>
  </div>

</template>

<script>
  import {getCountWxylx} from "@/api/mmhi/major_dangerous_sources";
export default {
  data () {
    this.chartSettings = {
      radius: 150
    }
    return {
      chartData: {},
      chartExtend:{}
    }
  },
  created() {
    this.getCountWxylx()
  },
  methods:{
    getCountWxylx() {
      getCountWxylx().then(res => {
        let data1 = res.data.data
        this.chartData= {
          columns: ['dictValue', 'counts'],
          rows: data1
          // rows: [
          //   data1.forEach(v=>{
          //     console.log('v',v)
          //       // {'dictValue': v.dictValue, 'counts': v.counts}
          //   })
          //   // {'dictValue': data1[0].dictValue, 'counts': data1[0].counts},
          //   // {'dictValue': data1[1].dictValue, 'counts': data1[1].counts},
          //   // {'dictValue': data1[2].dictValue, 'counts': data1[2].counts},
          //   // {'dictValue': data1[3].dictValue, 'counts': data1[3].counts},
          // ]
        }
        this.chartExtend={
            title:{
              // text:'分布',
              left:'center'
            }
        }
      })
    }

  }
}
</script>
<style>
.page-pie{
  color:#3CB371;
  font-weight:lighter;
}
</style>
